<!DOCTYPE html>
<html lang="zh-CN" color-mode=light>


<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>npm 和 yarn 你选哪个？ - 树朾的开源技术分享</title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="google" content="notranslate" />
  <meta name="keywords" content="开源, 分享">
  <meta name="description" content="每个团队都必须在开发过程中做出各种决定。其中通常会涉及...">
  <meta name="author" content="scwang90">
  <link rel="icon" href="/images/icons/favicon.ico">
  
  
  
  
  

  
<link rel="stylesheet" href="/css/style.css">


  
    
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1445822_p6ry5n7lrr.css">

  

  
    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">

  

  
    
      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/xcode.min.css" name="highlight-style" mode="light">

      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/solarized-dark.min.css" name="highlight-style" mode="dark">

      
  

  <script>
    var CONFIG = window.CONFIG || {};
    var ZHAOO = window.ZHAOO || {};
    CONFIG = {
      isHome: false,
      fancybox: true,
      pjax: false,
      loading: {
        gif: '/images/theme/loading.gif',
        lottie: ''
      },
      lazyload: {
        enable: true,
        only_post: 'false',
        loading: {
          gif: '/images/theme/loading.gif',
          lottie: ''
        }
      },
      donate: {
        enable: false,
        alipay: '/images/donate/pay_alipay.jpg',
        wechat: '/images/donate/pay_wxpay.jpg',
        tencent: '/images/donate/pay_tencent.jpg'
      },
      galleries: {
        enable: true
      },
      fab: {
        enable: true,
        always_show: false
      },
      carrier: {
        enable: true
      },
      daovoice: {
        enable: false
      },
      preview: {
        background: {
          default: '',
          api: ''
        },
        motto: {
          default: '我在开了灯的床头下，想问问自己的心啊。',
          typing: true,
          api: 'https://v2.jinrishici.com/one.json',
          data_contents: '["data","content"]'
        },
      },
      qrcode: {
        enable: true,
        type: 'url',
        image: 'https://pic.izhaoo.com/weapp-code.jpg',
      },
      toc: {
        enable: true
      },
      scrollbar: {
        type: 'default'
      },
      notification: {
        enable: false,
        delay: 4500,
        list: '',
        page_white_list: '',
        page_black_list: ''
      },
      search: {
        enable: false,
        path: ''
      }
    }
  </script>

  

  

<meta name="generator" content="Hexo 6.2.0"></head>

<body class="lock-screen">
  <div class="loading" id="loading"></div>
  
    


  <nav class="navbar">
    <div class="left">
      
        <i class="iconfont iconhome j-navbar-back-home"></i>
      
      
        <i class="iconfont iconqrcode j-navbar-qrcode"></i>
      
      
        <i class="iconfont iconmoono" id="color-toggle" color-toggle="light"></i>
      
      
    </div>
    <div class="center">npm 和 yarn 你选哪个？</div>
    <div class="right">
      <i class="iconfont iconmenu j-navbar-menu"></i>
    </div>
    
      <div id="qrcode-navbar"></div>
    
  </nav>

  
  

<nav class="menu">
  <div class="menu-container">
    <div class="menu-close">
      <i class="iconfont iconbaseline-close-px"></i>
    </div>
    <ul class="menu-content"><li class="menu-item">
        <a href="/ " class="underline "> 首页</a>
      </li><li class="menu-item">
        <a href="/galleries/ " class="underline "> 摄影</a>
      </li><li class="menu-item">
        <a href="/archives/ " class="underline "> 归档</a>
      </li><li class="menu-item">
        <a href="/tags/ " class="underline "> 标签</a>
      </li><li class="menu-item">
        <a href="/categories/ " class="underline "> 分类</a>
      </li><li class="menu-item">
        <a href="/about/ " class="underline "> 关于</a>
      </li></ul>
    
      <div class="menu-copyright"><p>Powered by <a target="_blank" href="https://github.com/scwang90">scwang90</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p> <p><a target="_blank" href="http://beian.miit.gov.cn/"><span>黔ICP备2021004317号-1</span></a><span>  |  </span><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img class="lazyload" data-original="/images/icons/icon-filing.png" src="https://www.beian.gov.cn/img/new/gongan.png"/> <span> 贵公网安备 52010202002539号</span></a></p></div>
    
  </div>
</nav>
  <main id="main">
  <div class="article-wrap">
    
      <div class="row container container-lg">
        <div class="col-xl-2"></div>
        <div class="col-xl-8"><article class="article">
  <div class="wrap">
    <section class="head">
  <img   class="lazyload" data-original="/images/theme/post-image.jpg" src=""  draggable="false">
  <div class="head-mask">
    <h1 class="head-title">npm 和 yarn 你选哪个？</h1>
    <div class="head-info">
      <span class="post-info-item"><i class="iconfont iconcalendar"></i>四月 13, 2021</span>
      
      <span class="post-info-item"><i class="iconfont iconfont-size"></i>1559</span>
    </div>
  </div>
</section>
    <section class="main">
      <section class="content article-entry">
        
          
        
        <p>每个团队都必须在开发过程中做出各种决定。其中通常会涉及到 yarn，npm 或其它用于构建和打包 javascript 代码的工具。一些开发人员渴望朝着某个方向前进，有时他们会花费大量时间来尝试，去做出实际上对他们的工作几乎没有什么影响的决策。</p>
<p>首先，要了解为什么要做出一个有趣的决定，我们需要看一下 javascript 中包管理的历史。</p>
<p>npm 出现之前：前端依赖项是保存到存储库中并手动下载的</p>
<ul>
<li><strong>2010</strong>：npm 发布并支持 nodejs</li>
<li><strong>2012</strong>：npm 的使用量急剧增加——主要是由于 Browserifys 浏览器的支持</li>
<li><strong>2012</strong>：npm 有了一个竞争对手 bower，它完全支持浏览器</li>
<li><strong>2012-2016</strong>：前端项目的依赖项数量成倍增加</li>
<li><strong>2012-2016</strong>：构建和安装前端应用变得越来越慢</li>
<li><strong>2012-2016</strong>：大量（重复的）依赖项存储在神奇的 node_modules 内的嵌套文件夹中☢️</li>
<li><strong>2012-2016</strong>：rm -rf node_modules 成为前端开发人员最常用的命令。</li>
<li><strong>2015</strong>：bower 输给了 npm</li>
<li><strong>2015</strong>：node_modules 被修改为扁平化的文件结构！</li>
<li><strong>2016</strong>： left-pad成为当时的新闻头条</li>
<li><strong>2016</strong>： yarn 发布<br>支持 npm 和 bower 仓库<br>yarn.lock 能够锁定安装的版本并提供确定性的依赖关系。不再 rm -rf node_modules！<br>yarn install 花费的时间是 npm install 的一半（不使用缓存的前提下）<br>缓存和脱机模式使构建过程几乎不花费时间</li>
<li><strong>2016</strong>：npm 发布 shrinkwrap<br>尝试处理依赖项锁定<br>不幸的是，一些错误和超出其管理能力的承诺导致该工具的声誉下降</li>
<li><strong>2017</strong>：npm 5 发布<br>package-lock.json 是他们的新工具，shrinkwrap 被放在一边<br>package-lock.json 开始与 yarns 锁定文件竞争</li>
<li><strong>2018</strong>：npm ci 发布<br>直接用 package-lock.json 构建代码<br>没有代价高昂的依赖项安全性分析和版本分析<br>大大减少了在构建服务器上的构建时间！</li>
<li><strong>2018</strong>：npm 6 发布 ‍♀️<br>npm 检查要安装的依赖项中的安全漏洞<br>yarn 和 npm 的构建时间不再有显差异</li>
<li><strong>2019</strong>：tink 开始进入 beta 模式<br>避免使用 node_modules，而是为项目中的每个依赖项创建一个带有哈希值的文件<br>尚未做好投入生产环境的准备</li>
<li>…</li>
<li></li>
</ul>
<h2 id="哎…"><a href="#哎…" class="headerlink" title="哎…"></a>哎…</h2><p>如我们所见，yarn 发布后，npm 受到启发（并被迫？）开发了许多好的工具和机制。 yarn 因为解决了与 npm 相关的一些重要问题而倍受赞誉，并在 2016 年开始向竞争对手施加压力。包的处理速度、安全性和确定性是必不可少的功能，它们使当今的开发人员能够专注于创造价值，而且并不为这两种工具进行争吵。</p>
<h2 id="结论"><a href="#结论" class="headerlink" title="结论"></a>结论</h2><p>为了方便起见，我建议大多数团队（必须做出许多其他更重要的技术决定）选择最简单的选项 —— npm。它随 node 一起提供，目前能以足够好的方式处理包管理。</p>
<h2 id="总是有例外吗？"><a href="#总是有例外吗？" class="headerlink" title="总是有例外吗？"></a>总是有例外吗？</h2><p>当使用 monorepo 时，yarn workspaces 是一种流行的替代方案，而 npm 则没有提供等效的替代方法。 lerna 是一个软件包，它还支持 monorepos 的使用，并且可以与 npm 和 yarn（带有 workspaces）一起使用。</p>
<h2 id="pnpm"><a href="#pnpm" class="headerlink" title="pnpm"></a>pnpm</h2><p>PS：应该提到的是， pnpm 是包管理器的第三种选择。如果 pnpm 的卖点是如果包已经下载到本地的一个存储库中，则它就不会再次下载了——这类似于 Java 中的 maven 依赖管理。在撰写本文时，pnpm 还不如 yarn 或 npm 成熟，也不能投入生产环境。</p>

      </section>
      <section class="extra">
        
          <ul class="copyright">
  
    <li><strong>本文作者：</strong>scwang90</li>
    <li><strong>本文链接：</strong><a href="https://blog.scwang90.cn/2021/04/13/npm-yarn/index.html" title="https:&#x2F;&#x2F;blog.scwang90.cn&#x2F;2021&#x2F;04&#x2F;13&#x2F;npm-yarn&#x2F;index.html">https:&#x2F;&#x2F;blog.scwang90.cn&#x2F;2021&#x2F;04&#x2F;13&#x2F;npm-yarn&#x2F;index.html</a></li>
    <li><strong>版权声明：</strong>本分享所有文章均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" title="BY-NC-SA" target="_blank" rel="noopener">BY-NC-SA</a> 许可协议，转载请注明出处！</li>
  
</ul>
        
        
        
  <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/tags/nodejs/" rel="tag">nodejs</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/npm/" rel="tag">npm</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/yarn/" rel="tag">yarn</a></li></ul> 

        
  <nav class="nav">
    <a href="/2021/06/29/linux-x11/"><i class="iconfont iconleft"></i>linux图形界面原理</a>
    <a href="/2019/12/11/apache-poi-garbled/">Apache POI PPT幻灯片转图片，中文乱码终极解决方案<i class="iconfont iconright"></i></a>
  </nav>

      </section>
      
    </section>
  </div>
</article></div>
        <div class="col-xl-2">
          
            
  <aside class="toc-wrap">
    <h3 class="toc-title">文章目录：</h3>
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%93%8E%E2%80%A6"><span class="toc-text">哎…</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%93%E8%AE%BA"><span class="toc-text">结论</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%80%BB%E6%98%AF%E6%9C%89%E4%BE%8B%E5%A4%96%E5%90%97%EF%BC%9F"><span class="toc-text">总是有例外吗？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#pnpm"><span class="toc-text">pnpm</span></a></li></ol>
  </aside>

          
        </div>
      </div>
    
  </div>
</main>
  

<footer class="footer">
  <div class="footer-social"><a 
        href="tencent://message/?Menu=yes&uin=283371828 "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#12B7F5'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconQQ "></i>
      </a><a 
        href="javascript:; "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#09BB07'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconwechat-fill "></i>
      </a><a 
        href="https://github.com/scwang90 "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#9f7be1'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  icongithub-fill "></i>
      </a><a 
        href="mailto:scwang90@hotmail.com "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color=#FF3B00" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconmail"></i>
      </a></div>
  
    <div class="footer-copyright"><p>Powered by <a target="_blank" href="https://github.com/scwang90">scwang90</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p> <p><a target="_blank" href="http://beian.miit.gov.cn/"><span>黔ICP备2021004317号-1</span></a><span>  |  </span><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img class="lazyload" data-original="/images/icons/icon-filing.png" src="https://www.beian.gov.cn/img/new/gongan.png"/> <span> 贵公网安备 52010202002539号</span></a></p></div>
  
</footer>
  
      <div class="fab fab-plus">
    <i class="iconfont iconplus"></i>
  </div>
  
  
  
  <div class="fab fab-up">
    <i class="iconfont iconcaret-up"></i>
  </div>
  
  
  
    
<script src="/js/color-mode.js"></script>

  
  
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>





  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>




  
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>






  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>




<script src="/js/utils.js"></script>
<script src="/js/script.js"></script>







  <script>
    (function () {
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
      } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
      }
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>













</html>